<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select
        clearable
        v-model="queryForm.provinceId"
        class="filter-item"
        filterable
        placeholder="省份"
        style="width: 125px;"
        @change="value => cascade(value, 'chooseProvince', 'query')"
      >
        <el-option
          v-for="(item, index) in provinces"
          :key="index"
          :value="item.rowId"
          :label="item.cnName"
        ></el-option>
      </el-select>
      <el-select
        clearable
        v-model="queryForm.cityId"
        class="filter-item"
        filterable
        placeholder="城市"
        style="width: 125px;"
        @change="value => cascade(value, 'chooseCity', 'query')"
      >
        <el-option
          v-for="(item, index) in citys"
          :key="index"
          :value="item.rowId"
          :label="item.cnName"
        ></el-option>
      </el-select>
      <el-select
        clearable
        v-model="queryForm.districtId"
        class="filter-item"
        filterable
        placeholder="区"
        style="width: 125px;"
        @change="value => cascade(value, 'chooseDistrict', 'query')"
      >
        <el-option
          v-for="(item, index) in districts"
          :key="index"
          :value="item.rowId"
          :label="item.cnName"
        ></el-option>
      </el-select>
      <el-select
        clearable
        v-model="queryForm.communityId"
        class="filter-item"
        filterable
        placeholder="小区"
        style="width: 125px;"
        @change="value => cascade(value, 'chooseCommunity', 'query')"
      >
        <el-option
          v-for="(item, index) in communitys"
          :key="index"
          :value="item.rowId"
          :label="item.name"
        ></el-option>
      </el-select>
      <el-select
        clearable
        v-model="queryForm.buildId"
        class="filter-item"
        filterable
        placeholder="楼栋"
        style="width: 125px;"
        @change="value => cascade(value, 'chooseBuilding', 'query')"
      >
        <el-option
          v-for="(item, index) in buildings"
          :key="index"
          :value="item.rowId"
          :label="item.name"
        ></el-option>
      </el-select>
      <el-select
        v-model="queryForm.unitId"
        class="filter-item"
        filterable
        placeholder="单元"
        style="width: 125px;"
        @change="value => cascade(value, 'chooseUnit', 'query')"
      >
        <el-option
          v-for="(item, index) in units"
          :key="index"
          :value="item.rowId"
          :label="item.name"
        ></el-option>
      </el-select>
      <el-input
        style="width: 200px;"
        class="filter-item"
        placeholder="请输入小区名称"
        v-model.trim="queryForm.communityName"
      >
      </el-input>
      <el-input
        style="width: 200px;"
        class="filter-item"
        placeholder="请输入楼栋名称"
        v-model.trim="queryForm.buildName"
      >
      </el-input>
      <el-input
        style="width: 200px;"
        class="filter-item"
        placeholder="请输入单元名称"
        v-model.trim="queryForm.unitName"
      >
      </el-input>
      <el-input
        style="width: 200px;"
        class="filter-item"
        placeholder="请输入设备号"
        v-model.trim="queryForm.deviceCode"
      >
      </el-input>
      <el-button
        class="filter-item"
        @click="doQuery"
        type="primary"
        icon="el-icon-search"
        >查询</el-button
      >
      <el-button
        class="filter-item"
        @click="doExport"
        type="default"
        icon="el-icon-download"
        >导出</el-button
      >
    </div>
    <el-table v-loading="loading" :data="records" style="width: 100%">
      <!-- <el-table-column
        prop="rowId"
        label="ID"
        width="100"
        align="center">
      </el-table-column> -->
      <el-table-column
        prop="villageName"
        label="省/市/区"
        width="400"
        align="center"
      >
        <template slot-scope="scope">
          <template
            v-if="
              scope.row.townName !== undefined &&
                scope.row.villageName !== undefined
            "
          >
            {{
              `${scope.row.provinceName}/${scope.row.cityName}/${scope.row.districtName}/${scope.row.townName}/${scope.row.villageName}`
            }}
          </template>
          <template
            v-if="
              scope.row.townName !== undefined &&
                scope.row.villageName === undefined
            "
          >
            {{
              `${scope.row.provinceName}/${scope.row.cityName}/${scope.row.districtName}/${scope.row.townName}`
            }}
          </template>
          <template
            v-if="
              scope.row.townName === undefined &&
                scope.row.villageName === undefined
            "
          >
            {{
              `${scope.row.provinceName}/${scope.row.cityName}/${scope.row.districtName}`
            }}
          </template>
        </template>
      </el-table-column>
      <el-table-column
        prop="communityName"
        label="小区名称"
        width="250"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="number"
        label="大楼/单元"
        width="250"
        align="center"
      >
        <template slot-scope="scope">
          {{ `${scope.row.buildName}栋/${scope.row.unitName}单元` }}
        </template>
      </el-table-column>
      <el-table-column
        prop="deviceCode"
        label="设备号"
        width="300"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="userCount" label="人数" width="300" align="center">
        <template slot-scope="scope">
          {{ `${scope.row.userCount}人` }}
        </template>
      </el-table-column>
      <el-table-column align="center" class-name="small-padding">
        <!-- <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleDelete(scope.row.rowId)"  title="删除" icon="el-icon-delete" circle ></el-button>
        </template> -->
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryForm.current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="queryForm.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryForm.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { selectUserCountByUnitBindDevice, doExport } from '@/api/community'
import { queryProvince, getCity, getDistrict } from '@/api/area'
import {
  selectAllCommunity,
  selectByBuildingUnit,
  selectByCommunityIdBuilding
} from '@/api/community'
export default {
  name: 'deviceOnlineRate',
  data() {
    return {
      loading: false,
      queryForm: {
        current: 1,
        pages: 0,
        total: 0,
        size: 10
      },
      records: [],
      provinces: [],
      citys: [],
      districts: [],
      communitys: [],
      buildings: [],
      units: [],
      selectForm: {}
    }
  },
  created() {
    this.doQuery()
  },
  methods: {
    handleCurrentChange(current) {
      this.queryForm.current = current
      this.doQuery()
    },
    handleSizeChange(size) {
      this.queryForm.size = size
      this.doQuery()
    },
    doQuery() {
      this.loading = true
      selectUserCountByUnitBindDevice(this.queryForm).then(
        ({ data: { data } }) => {
          this.queryForm.current = data.current
          this.queryForm.pages = data.pages
          this.queryForm.total = data.total
          this.queryForm.size = data.size
          this.records = data.records
          this.loading = false
        }
      )
      queryProvince().then(({ data: { data } }) => {
        this.provinces = data
        this.loading = false
      })
    },
    doExport() {
      this.selectForm.provinceId =
        this.queryForm.provinceId !== null ||
        this.queryForm.provinceId !== undefined
          ? this.queryForm.provinceId
          : null
      this.selectForm.cityId =
        this.queryForm.cityId !== null || this.queryForm.cityId !== undefined
          ? this.queryForm.cityId
          : null
      this.selectForm.districtId =
        this.queryForm.districtId !== null ||
        this.queryForm.districtId !== undefined
          ? this.queryForm.districtId
          : null
      this.selectForm.communityId =
        this.queryForm.communityId !== null ||
        this.queryForm.communityId !== undefined
          ? this.queryForm.communityId
          : null
      this.selectForm.buildId =
        this.queryForm.buildId !== null || this.queryForm.buildId !== undefined
          ? this.queryForm.buildId
          : null
      this.selectForm.unitId =
        this.queryForm.unitId !== null || this.queryForm.unitId !== undefined
          ? this.queryForm.unitId
          : null
      this.selectForm.communityName =
        this.queryForm.communityName !== null ||
        this.queryForm.communityName !== undefined
          ? this.queryForm.communityName
          : null
      this.selectForm.buildName =
        this.queryForm.buildName !== null ||
        this.queryForm.buildName !== undefined
          ? this.queryForm.buildName
          : null
      this.selectForm.unitName =
        this.queryForm.unitName !== null ||
        this.queryForm.unitName !== undefined
          ? this.queryForm.unitName
          : null
      this.selectForm.deviceCode =
        this.queryForm.deviceCode !== null ||
        this.queryForm.deviceCode !== undefined
          ? this.queryForm.deviceCode
          : null
      doExport(this.selectForm).then(({ data: { data, msg } }) => {
        this.$message({
          showClose: true,
          message: msg,
          type: 'success'
        })
      })
    },
    cascade(rowId, level, param) {
      if (param === 'query') {
        if (rowId !== '') {
          switch (level) {
            case 'chooseProvince':
              getCity(rowId).then(({ data: { data } }) => {
                this.queryForm.cityId = ''
                this.queryForm.districtId = ''
                this.queryForm.communityId = ''
                this.queryForm.buildId = ''
                this.queryForm.unitId = ''
                this.citys = []
                this.districts = []
                this.communitys = []
                this.buildings = []
                this.units = []
                this.citys = data
              })
              return
            case 'chooseCity':
              getDistrict(rowId).then(({ data: { data } }) => {
                this.queryForm.districtId = ''
                this.queryForm.communityId = ''
                this.queryForm.buildId = ''
                this.queryForm.unitId = ''
                this.districts = []
                this.communitys = []
                this.buildings = []
                this.units = []
                this.districts = data
              })
              return
            case 'chooseDistrict':
              selectAllCommunity(rowId).then(({ data: { data } }) => {
                this.queryForm.communityId = ''
                this.queryForm.buildId = ''
                this.queryForm.unitId = ''
                this.communitys = []
                this.buildings = []
                this.units = []
                this.communitys = data
              })
              return
            case 'chooseCommunity':
              selectByCommunityIdBuilding(rowId).then(({ data: { data } }) => {
                this.queryForm.buildId = ''
                this.queryForm.unitId = ''
                this.buildings = []
                this.units = []
                this.buildings = data
              })
              return
            case 'chooseBuilding':
              selectByBuildingUnit(rowId).then(({ data: { data } }) => {
                this.queryForm.unitId = ''
                this.units = []
                this.units = data
              })
              return
            case 'chooseUnit':
              selectByBuildingUnit(this.queryForm.buildId).then(
                ({ data: { data } }) => {
                  this.units = data
                }
              )
              return
          }
        } else {
          switch (level) {
            case 'chooseProvince':
              this.queryForm.cityId = ''
              this.queryForm.districtId = ''
              this.queryForm.communityId = ''
              this.queryForm.buildId = ''
              this.queryForm.unitId = ''
              this.citys = []
              this.districts = []
              this.communitys = []
              this.buildings = []
              this.units = []
              return
            case 'chooseCity':
              this.queryForm.districtId = ''
              this.queryForm.communityId = ''
              this.queryForm.buildId = ''
              this.queryForm.unitId = ''
              this.districts = []
              this.communitys = []
              this.buildings = []
              this.units = []
              return
            case 'chooseDistrict':
              this.queryForm.communityId = ''
              this.queryForm.buildId = ''
              this.queryForm.unitId = ''
              this.communitys = []
              this.buildings = []
              this.units = []
              return
            case 'chooseCommunity':
              this.queryForm.buildId = ''
              this.queryForm.unitId = ''
              this.buildings = []
              this.units = []
              return
            case 'chooseBuilding':
              this.queryForm.unitId = ''
              this.units = []
              return
          }
        }
      }
    }
  },
  components: {}
}
</script>

<style scoped></style>
